<!--
 * @Project_description: 用户添加编辑
-->
<template>
  <div class='user-add'>
    <el-dialog v-drag :before-close='handleClose' :title='title' :visible.sync='dialogVisible' width='33%'>
      <el-form ref='form' :disabled='loading' :model='form' :rules='rules' label-width='100px'>
        <el-form-item label='头像' prop='avatarImg'>
          <y-upload-img v-model='form.avatarImg' :limit='1' />
        </el-form-item>
        <el-form-item label='当前组织' prop='currentOrgId'>
          <y-tree
            v-model='form.currentOrgId'
            :normalizer='normalizer'
            :options='orgTree'
            :show-count='true'
            placeholder='选择组织'
          />
        </el-form-item>
        <el-form-item label='姓名' prop='userName'>
          <el-input
            v-model='form.userName'
            clearable
            maxlength='10'
            placeholder='请输入姓名'
            show-word-limit
            type='text'
          >
          </el-input>
        </el-form-item>
        <el-form-item label='账号' prop='accountNumber'>
          <el-input
            v-model='form.accountNumber'
            clearable
            maxlength='18'
            placeholder='请输入账号'
            show-word-limit
            type='text'
          >
          </el-input>
        </el-form-item>
        <el-form-item label='身份证' prop='idCard'>
          <el-input
            v-model='form.idCard'
            clearable
            placeholder='请输入身份证'
            type='text'
          >
          </el-input>
        </el-form-item>
        <el-form-item label='联系电话' prop='phone'>
          <el-input
            v-model='form.phone'
            clearable
            placeholder='请输入联系电话'
            type='text'
          >
          </el-input>
        </el-form-item>
        <el-form-item label='状态' prop='state'>
          <el-radio-group v-model='form.state'>
            <el-radio :label='0'>启用</el-radio>
            <el-radio :label='1'>禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label='备注' prop='remarks'>
          <el-input v-model='form.remarks' :rows='3' maxlength='150'
                    placeholder='请输入备注' type='textarea' />
        </el-form-item>
      </el-form>
      <!-- 下方按钮 -->
      <span slot='footer' class='dialog-footer'>
        <el-button :loading='loading' type='primary' @click='onSuccess'>保 存</el-button>
        <el-button @click='dialogVisible = false'>取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import validator from '@/libs/utli.validator'
import { mapState } from 'vuex'

export default {
  name: 'sys-user-add',
  data() {
    // 这里存放数据
    return {
      dialogVisible: false,
      loading: false,
      title: '添加',
      form: {
        'avatarImg': '',
        'orgId': '',
        'userName': '',
        'accountNumber': '',
        'idCard': '',
        'phone': '',
        'state': 1,
        'remarks': '',
      },
      isPut: false,
      rules: {
        'userName': [
          {
            'required': true,
            'message': '姓名不能为空',
            'trigger': 'blur',
          },
        ],
        'currentOrgId': [
          {
            'required': true,
            'message': '当前组织不能为空',
            'trigger': 'blur',
          },
        ],
        'accountNumber': [
          {
            'required': true,
            'message': '账号不能为空',
            'trigger': 'blur',
          },
        ],
        'idCard': [
          // { required: true, message: '身份证不能为空', trigger: 'blur' },
          { 'validator': validator.idCard, 'trigger': 'blur' },
        ],
        'phone': [
          { 'validator': validator.phone, 'trigger': 'blur' },
        ],
      },
    }
  },
  // 监听属性 类似于data概念
  computed: {
    ...mapState('tree/org', [
      'orgTree', 'orgId',
    ]),
  },
  // 方法集合
  methods: {
    //初始化
    init(row) {
      let _this = this
      if (row) {
        this.isPut = true
        this.title = '编辑'
        this.form = row
      } else {
        this.isPut = false
        this.form = {
          'avatarImg': '',
          'currentOrgId': this.orgId || this.$db._getUser('currentOrgId'),
          'userName': '',
          'accountNumber': '',
          'idCard': '',
          'phone': '',
          'state': 0,
          'remarks': '',
        }
      }
      this.dialogVisible = true
      //移除表单校验结果
      setTimeout(() => {
        _this.$refs.form.clearValidate()
        _this._getRules(_this.$refs.form)
      })
    },
    // 关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {
        })
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      if (node.children == null || node.children == 'null') {
        delete node.children
      }
      return {
        id: node.orgId,
        label: node.orgName,
        children: node.children,
      }
    },
    //提交
    async onSuccess() {
      let _this = this
      _this.$refs.form.validate(async (valid) => {
        if (valid) {
          _this.loading = true
          try {
            if (_this.isPut) {
              // 修改
              await _this.$api.user.put(_this.form)
              _this.$message.success('修改成功')
            } else {
              // 添加
              await _this.$api.user.add(_this.form)
              _this.$message.success('添加成功')
            }
            await _this.$emit('load')
            _this.dialogVisible = false
            _this.loading = false
          } catch (error) {
            _this.loading = false

          }
        } else {
          console.log('validate error')
        }
      })
    },
  },
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
